<template>
	<view class="container">
		<view class="list-box">
			<view 
				class="item flex-just-between" 
				:class="{ active: currentLocale === 'en' }" 
				@click="settingLocale('en')"
			>
				<view class="left">
					<text>English</text> <!-- 固定显示英文 -->
				</view>
				<view class="right" v-if="currentLocale === 'en'">
					<image src="/static/check.png" class="check-icon"></image>
				</view>
			</view>
			<view 
				class="item flex-just-between" 
				:class="{ active: currentLocale === 'zh-TW' }" 
				@click="settingLocale('zh-TW')"
			>
				<view class="left">
					<text>繁体中文</text> <!-- 固定显示繁体中文 -->
				</view>
				<view class="right" v-if="currentLocale === 'zh-TW'">
					<image src="/static/check.png" class="check-icon"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentLocale: uni.getStorageSync('appLanguage') || 'zh-TW'
		}
	},
	methods: {
		settingLocale(locale) {
			this.$switchLanguage(locale)
		}
	}
}
</script>

<style lang="less" scoped>
	.container {
		.list-box {
			padding: 0 52rpx;

			.item {
				height: 110rpx;
				font-size: 32rpx;

				image {
					margin-right: 30rpx;
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.logout-btn {
			width: 556rpx;
			height: 96rpx;
			background-color: #E9E9E9;
			border-radius: 49rpx;
			font-size: 36rpx;
			position: absolute;
			left: 96rpx;
			bottom: 10%;

			&::after {
				border: none;
			}
		}

		.mask {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 1000;
		}

		.popup-content {
			padding: 40rpx 0;
			text-align: center;

			.text-info {
				color: #999;
				font-size: 28rpx;
				margin-bottom: 42rpx;
			}

			.exit-btn,
			.cancel-btn {
				height: 124rpx;
				line-height: 124rpx;
				font-size: 32rpx;
			}

			.exit-btn {
				margin-top: 42rpx;
				border-bottom: 12rpx solid #EDEDED;
				color: #FF6464;
			}

			.cancel-btn {
				color: #666;
			}
		}
	}
</style>